<template>
  <div class="container">
    <header class="header" id="header">
      <router-link class="iconfont icon-back" to="user" tag="span"></router-link>
    </header>

    <div class="content">
      <div class="top">
        <h1>用户注册</h1>
      </div>
      <div class="center">
        <div class="phone">
          <s class="iconfont icon02"></s>
          <van-field
            v-model="username"
            placeholder="请输入手机号"
            clearable
            :error-message="usernamemsg"
          />
        </div>
        <div class="pass">
          <s class="iconfont iconmima s2"></s>
          <van-field
            v-model="password"
            type="password"
            clearable
            placeholder="请输入密码"
            :error-message="passwordmsg"
          />
        </div>
        <div class="code">
          <van-field
            v-model="code"
            center
            clearable
            placeholder="请输入短信验证码"
            :error-message="codemsg"
          />
            <van-button slot="button" :disabled="disabled" size="small" type="primary" @click="sendCode" class="code1">{{ btnmsg }}</van-button>
        </div>
        <van-button type="primary" :loding="loading" loading-text="注册..." size="large" :disabled="flag" @click="register">注册</van-button>
        <van-divider @click="toLogin">已有账号  ？  请直接登陆</van-divider>
      </div>
      <!-- <van-field
        v-model="username"
        placeholder="请输入手机号"
        clearable
        :error-message="usernamemsg"
      />
      <van-field
        v-model="password"
        type="password"
        clearable
        placeholder="请输入密码"
        :error-message="passwordmsg"
      />
      <van-field
        v-model="code"
        center
        clearable
        placeholder="请输入短信验证码"
        :error-message="codemsg"
      >
        <van-button slot="button" :disabled="disabled" size="small" type="primary" @click="sendCode">{{ btnmsg }}</van-button>
      </van-field>
      <van-button type="primary" :loding="loading" loading-text="注册..." size="large" :disabled="flag" @click="register">注册</van-button>
      <van-divider @click="toLogin">立即登录</van-divider> -->
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Field, Button, Toast, Divider, } from 'vant'
import axios from 'axios'

Vue.use(Field)
Vue.use(Button)
Vue.use(Toast)
Vue.use(Divider)
export default {
  data () {
    return {
      username: '',
      password: '',
      text:'',
      code: '',
      btnmsg:'发送验证码',
      disabled:false,
      adminCode:'',
      loading: false,
      flag: false
    }
  },
  computed: {
    usernamemsg () {
      if (this.username === '') {
        return ''
      } else if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.username)) {
        return '手机号码格式错误'
      } else {
        return ''
      }
    },
    passwordmsg () {
      if (this.password === '') {
        return ''
      } else if (!/^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/.test(this.password)) {
        return '密码格式错误'
      } else {
        return ''
      }
    },
    textmsg () {
      if (this.text === '') {
        return ''
      } else if (!/^[\u4e00-\u9fa5]{2,4}$/.test(this.text)) {
        return '真实姓名错误'
      } else {
        return ''
      }
    },
    codemsg () {
      if (this.code === '') {
        return ''
      } else if (!/^\d{5}$/.test(this.code)) {
        return '验证码格式错误'
      } else {
        return ''
      }
    }
  },
  methods: {
    toLogin(){
      this.$router.replace('/login')
    },
    // toLogin(){
    //   this.$router.replace('/login')
    // },
    sendCode(){
      let dao = 5
      let t
      t = setInterval(()=>{
        dao--
        if(dao === 0){
          clearInterval(t)
          this.disabled = false
          this.btnmsg = '发送验证码'
          return
        }
        this.disabled = true
        this.btnmsg = dao + 's后重新发送'
      },1000)
      this.getCode()
    },
    getCode(){
      if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.username)){
        Toast('请填写正确的手机号码')
      } else {
        axios.get('https://www.daxunxun.com/users/sendCode?tel=' + this.username).then(res=>{
          console.log(res.data)
          if(res.data === 1){
            Toast('用户名已注册，请直接登录')
          }else if(res.data === 0){
            Toast('获取验证码失败')
          }else{
            this.adminCode = res.data.code
          }
        })
      }
    },
    register(){
      if(this.username === '' || this.usernamemsg === '手机号码格式错误'){
        Toast('手机号码输入有误')
        return
      }
      if(this.password === '' || this.passwordmsg === '密码格式错误，最少为6位'){
        Toast('密码输入有误')
        return
      }
      if(this.code === '' || this.code !== this.adminCode){
        Toast('验证码输入有误')
        return
      }
      this.registerFn() 
    },
    registerFn(){
      this.flag = true
      this.loading = true
      axios.post('https://www.daxunxun.com/users/register',{
        username: this.username,
        password: this.password
      }).then(res=>{
        this.flag = false
        this.loading = false
        if(res.data === 2){
          Toast('用户名已注册，请直接登录')
        }else if(res.data === 0){
          Toast('注册失败')
        }else{
          Toast('注册成功')
        }
      })
    }
  }
}


</script>

<style lang="scss" scoped>

#header{
  height: 40px;
  span{
    font-size: 28px;
    margin-left: 10px;
  }
}
.content{

  .top{
    height: 60px;
    margin-top: 60px;
    h1{
      font-size: 30px;
      font-weight: 100;
      text-align: center;
    }
  }
  .center{
    margin-top: 20px;
    .phone{
      display: flex;
      height: 80px;
      margin-left: 60px;
      s{
        font-size: 20px;
        margin-right: 25px;
        margin-top: 6px;
      }
    }
    .code{
      display: flex;
      height: 80px;
      margin-left: 60px;
      .code1{
        margin-right: 20px;
        width: 120px;
        margin-top: 25px;
      }
    }
    .pass{
      display: flex;
      height: 80px;
      margin-left: 60px;
      s{
        font-size: 20px;
        margin-right: 25px;
        margin-top: 6px;
      }
    }
  }
}
</style>